<script lang='ts' setup>
//@ts-nocheck
import { useGlobalStore } from '../../store/GlobalStore/index'
import { changePwd } from "../../api/request";
const store=useGlobalStore()
const name=store.userInfo.username 
const sid=store.userInfo.sid
var centerDialogVisible = ref(false)
const jwtToken = localStorage.getItem('jwtToken')
const changePWD = async() => {
  if (pwd.value != pwd2.value) {
    console.log("different");
    pwd.value = "";
    pwd2.value = "";
    ElMessage.error('修改密码失败，两次密码不一样')
    return 0;
  }
  const changedata = {
    username: sid,
    pwd: pwd.value,
    role
  }
  console.log(changedata);
  let result = await changePwd(jwtToken,changedata)
   console.log("changed", result);
   if(result.status==200) {
    ElMessage({
    message: '密码修改成功',
    type: 'success',
  })
   }
   else {
    ElMessage.error("修改失败")
   }
  }
</script>
<template>
<div id="mainn">
<ul>
    <li><div class="name">姓名：<span>{{ name }}</span></div></li>
    <li><div class="tid">学生学号：{{ sid }}</div></li>
    <!-- <li><div class="tid">学生班级：{{ sid }}</div></li> -->
</ul>
<el-button type="primary" @click="centerDialogVisible = true">修改密码</el-button>
<el-dialog
    v-model="centerDialogVisible"
    title="Warning"
    width="30%"
    align-center
  >
    <div>新密码：<span><el-input v-model="input" placeholder="" type="password"/></span></div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="changePWD();centerDialogVisible = false;">
          确认修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</div>
</template>

<style scoped lang='scss'>
#mainn {
    margin-left: 100px;
    width: 80%;
    height: 1000px;
    border-radius: 10px;
    background-color: rgba(38, 220, 211, 0.2);
    padding-left: 30px;
    padding-top: 30px;
    font-size: 30px;
    ul {
        li{
            margin-top: 20px;
        }
    }
}
</style>